<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
  </head>
  <body>
    <div class="readContainer">
      <!-- 头部导航区域 -->
      <header class="header">
        <div class="headerInner">
          <!-- 左边的logo -->
          <a class="leftLogo" href="javascript:;" title="豆瓣阅读"></a>
          <!-- 左边的导航：分类、搜索 -->
          <ul class="leftNav">
            <!-- 分类 -->
            <li class="nav category">
              <i class="iconfont icon-list"></i>
              <span>分类</span>
            </li>
            <!-- 搜索 -->
            <li class="nav search">
              <i class="iconfont icon-search"></i>
              <span>搜索</span>
            </li>
          </ul>
          <!-- 中间的nav -->
          <ul  class="centerNav">
            <li class="nav">原创</li>
            <li class="nav">排行</li>
            <li class="nav">出版</li>
            <li class="nav">会员</li>
            <li class="nav">App</li>
          </ul>
          <!-- 右边的nav -->
          <ul  class="rightNav">
            <li class="nav text">成为作者</li>
            <li class="nav">
              <i class="iconfont icon-gouwuchezhengpin"></i>
            </li>
            <li class="nav">
              <i class="iconfont icon-tixing"></i>
            </li>
            <li class="nav">
              <i class="iconfont icon-wodeshujia"></i>
            </li>
            <li class="nav personal">
              <img src="https://img1.doubanio.com/icon/user_normal.jpg" alt="">
            </li>
          </ul>
        </div>
        <!-- 下拉列表展示 -->
        <div class="optionList">
          <div class="list">
            <div class="works">
              <i>原创作品</i>
              <ul>
                <li>言情小说</li>
                <li>女性小说</li>
                <li>悬疑小说</li>
                <li>科幻小说</li>
                <li>幻想小说</li>
                <li>文艺小说</li>
                <li>历史小说</li>
                <li>非小说</li>
              </ul>
            </div>
            <div class="books">
              <i>出版书籍</i>
              <div class="list">
                <div class="listDiv">
                  <ul class="listUl">
                    <li class="listLi">
                      <ul>
                        <li>小说</li>
                        <li>世界名著</li>
                        <li>影视原著</li>
                        <li>推理悬疑</li>
                        <li>科幻</li>
                        <li>言情</li>
                        <li>更多</li>
                      </ul>
                    </li>
                    <li class="listLi">
                      <ul>
                        <li>文学</li>
                        <li>文学经典</li>
                        <li>散文随笔</li>
                        <li>日记书信</li>
                        <li>演讲访谈</li>
                        <li>纪实文学</li>
                        <li>更多</li>
                      </ul>
                    </li>
                    <li class="listLi">
                      <ul>
                        <li>人文社科</li>
                        <li>经典著作</li>
                        <li>心理学</li>
                        <li>社会学</li>
                        <li>历史</li>
                        <li>文化</li>
                        <li>更多</li>
                      </ul>
                    </li>
                    <li class="listLi">
                      <ul>
                        <li>经济管理</li>
                        <li>经典畅销</li>
                        <li>创新创业</li>
                        <li>市场营销</li>
                        <li>投资理财</li>
                        <li>企业经营</li>
                        <li>更多</li>
                      </ul>
                    </li>
                    <li class="listLi">
                      <ul>
                        <li>科技科普</li>
                        <li>经典著作</li>
                        <li>心理学</li>
                        <li>社会学</li>
                        <li>历史</li>
                        <li>文化</li>
                        <li>更多</li>
                      </ul>
                    </li>
                    <li class="listLi">
                      <ul>
                        <li>计算机与互联网</li>
                        <li>经典畅销</li>
                        <li>创新创业</li>
                        <li>市场营销</li>
                        <li>投资理财</li>
                        <li>企业经营</li>
                        <li>更多</li>
                      </ul>
                    </li>
                    <li class="listLi">
                      <ul>
                        <li>成功励志</li>
                        <li>经典著作</li>
                        <li>心理学</li>
                        <li>社会学</li>
                        <li>历史</li>
                        <li>文化</li>
                        <li>更多</li>
                      </ul>
                    </li>
                  </ul>
                </div>
                <div class="listDiv">
                  <ul class="listUl">
                    <li class="listLi">
                      <ul>
                        <li>小说</li>
                        <li>世界名著</li>
                        <li>影视原著</li>
                        <li>推理悬疑</li>
                        <li>科幻</li>
                        <li>言情</li>
                        <li>更多</li>
                      </ul>
                    </li>
                    <li class="listLi">
                      <ul>
                        <li>文学</li>
                        <li>文学经典</li>
                        <li>散文随笔</li>
                        <li>日记书信</li>
                        <li>演讲访谈</li>
                        <li>纪实文学</li>
                        <li>更多</li>
                      </ul>
                    </li>
                    <li class="listLi">
                      <ul>
                        <li>人文社科</li>
                        <li>经典著作</li>
                        <li>心理学</li>
                        <li>社会学</li>
                        <li>历史</li>
                        <li>文化</li>
                        <li>更多</li>
                      </ul>
                    </li>
                    <li class="listLi">
                      <ul>
                        <li>经济管理</li>
                        <li>经典畅销</li>
                        <li>创新创业</li>
                        <li>市场营销</li>
                        <li>投资理财</li>
                        <li>企业经营</li>
                        <li>更多</li>
                      </ul>
                    </li>
                    <li class="listLi">
                      <ul>
                        <li>科技科普</li>
                        <li>经典著作</li>
                        <li>心理学</li>
                        <li>社会学</li>
                        <li>历史</li>
                        <li>文化</li>
                        <li>更多</li>
                      </ul>
                    </li>
                    <li class="listLi">
                      <ul>
                        <li>计算机与互联网</li>
                        <li>经典畅销</li>
                        <li>创新创业</li>
                        <li>市场营销</li>
                        <li>投资理财</li>
                        <li>企业经营</li>
                        <li>更多</li>
                      </ul>
                    </li>
                    <li class="listLi">
                      <ul>
                        <li>成功励志</li>
                        <li>经典著作</li>
                        <li>心理学</li>
                        <li>社会学</li>
                        <li>历史</li>
                        <li>文化</li>
                        <li>更多</li>
                      </ul>
                    </li>
                  </ul>
                </div>
              </div>
              
            </div>
          </div>
        </div>
        <!-- 搜索框 -->
        <div class="search">
          <form action="">
            <input type="text" placeholder="原创作品 / 电子书 / 作者 / 译者 / 出版社">
            <button type="submit">搜索</button>
          </form>
        </div>
      </header>

      <!-- 轮播图区域 -->
      <div class="bannerContainer">
        <!-- 轮播图 -->
        <div class="banner">
          <ul>
            <li>
              <img src="https://img3.doubanio.com/view/ark_campaign_pic/web_large/public/9982.jpg" alt="">
            </li>
          </ul>
        </div>
        <!-- 广告 -->
        <div class="advertisement">
          <ul>
            <li>
              <div>热</div>
              <span>恭喜长篇拉力赛总冠军《装腔启示录》成功售出影视改编权</span>
            </li>
            <li>
              <div>热</div>
              <span>恭喜长篇拉力赛悬疑组冠军《雪盲》成功售出影视改编权</span>
            </li>
            <li>
              <div>热</div>
              <span>恭喜长篇拉力赛幻想组冠军《双宿时代》成功售出影视改编权</span>
            </li>
          </ul>
        </div>
      </div>
      <!-- 版心 -->
      <div class="container">
        <div class="select">
          <select>
            <optgroup label="一级频道" placeholder="请选择">
              <option>悬疑频道</option>
              <option>文艺频道</option>
              <option>历史频道</option>
              <option>幻想频道</option>
              <option>女性频道</option>
            </optgroup>
          </select>
          <select>
            <optgroup label="二级频道">
              <option>生活悬疑</option>
              <option>罪案故事</option>
              <option>复仇计划</option>
              <option>推理解谜</option>
            </optgroup>
          </select>
        </div>
        <div class="readList">
          <ul class="readListUl">
            <li class="readListLl">
              <img src="https://img3.doubanio.com/view/ark_column_cover/retina/public/34778722.jpg?v=1598263500" alt="">
              <div class="detail">
                <span class="title">没有死者的谋杀</span>
                <span class="author">陆雾</span>
                <p>同桌吃饭的网友，突然人间蒸发，目击者都称并无此人存在；七旬老汉为爱私奔，为何会牵扯出连环命案；案发现场被破坏的少女失踪案，尘封十年后牵扯出三条命案；神秘失踪的未婚夫，竟然同时还有五个女友,只有你一人能看到的幽灵邮件，是幻觉还是阴谋？不被重视的失踪案背后，总是精心计划的谋杀。如何在没有尸体的情况下推理？如何在死者不明的情况下找出凶手？五起单元案，一个反转。爱与谋杀，同样危险。</p>
                <ul>
                  <li>悬疑</li>
                  <li>18.9万字</li>
                  <li>生活悬疑</li>
                  <li>连载中</li>
                </ul>
              </div>
            </li>
            <li class="readListLl">
              <img src="https://img3.doubanio.com/view/ark_column_cover/retina/public/34778722.jpg?v=1598263500" alt="">
              <div class="detail">
                <span class="title">没有死者的谋杀</span>
                <span class="author">陆雾</span>
                <p>同桌吃饭的网友，突然人间蒸发，目击者都称并无此人存在；七旬老汉为爱私奔，为何会牵扯出连环命案；案发现场被破坏的少女失踪案，尘封十年后牵扯出三条命案；神秘失踪的未婚夫，竟然同时还有五个女友,只有你一人能看到的幽灵邮件，是幻觉还是阴谋？不被重视的失踪案背后，总是精心计划的谋杀。如何在没有尸体的情况下推理？如何在死者不明的情况下找出凶手？五起单元案，一个反转。爱与谋杀，同样危险。</p>
                <ul>
                  <li>悬疑</li>
                  <li>18.9万字</li>
                  <li>生活悬疑</li>
                  <li>连载中</li>
                </ul>
              </div>
            </li>
            <li class="readListLl">
              <img src="https://img3.doubanio.com/view/ark_column_cover/retina/public/34778722.jpg?v=1598263500" alt="">
              <div class="detail">
                <span class="title">没有死者的谋杀</span>
                <span class="author">陆雾</span>
                <p>同桌吃饭的网友，突然人间蒸发，目击者都称并无此人存在；七旬老汉为爱私奔，为何会牵扯出连环命案；案发现场被破坏的少女失踪案，尘封十年后牵扯出三条命案；神秘失踪的未婚夫，竟然同时还有五个女友,只有你一人能看到的幽灵邮件，是幻觉还是阴谋？不被重视的失踪案背后，总是精心计划的谋杀。如何在没有尸体的情况下推理？如何在死者不明的情况下找出凶手？五起单元案，一个反转。爱与谋杀，同样危险。</p>
                <ul>
                  <li>悬疑</li>
                  <li>18.9万字</li>
                  <li>生活悬疑</li>
                  <li>连载中</li>
                </ul>
              </div>
            </li>
            <li class="readListLl">
              <img src="https://img3.doubanio.com/view/ark_column_cover/retina/public/34778722.jpg?v=1598263500" alt="">
              <div class="detail">
                <span class="title">没有死者的谋杀</span>
                <span class="author">陆雾</span>
                <p>同桌吃饭的网友，突然人间蒸发，目击者都称并无此人存在；七旬老汉为爱私奔，为何会牵扯出连环命案；案发现场被破坏的少女失踪案，尘封十年后牵扯出三条命案；神秘失踪的未婚夫，竟然同时还有五个女友,只有你一人能看到的幽灵邮件，是幻觉还是阴谋？不被重视的失踪案背后，总是精心计划的谋杀。如何在没有尸体的情况下推理？如何在死者不明的情况下找出凶手？五起单元案，一个反转。爱与谋杀，同样危险。</p>
                <ul>
                  <li>悬疑</li>
                  <li>18.9万字</li>
                  <li>生活悬疑</li>
                  <li>连载中</li>
                </ul>
              </div>
            </li>
            <li class="readListLl">
              <img src="https://img3.doubanio.com/view/ark_column_cover/retina/public/34778722.jpg?v=1598263500" alt="">
              <div class="detail">
                <span class="title">没有死者的谋杀</span>
                <span class="author">陆雾</span>
                <p>同桌吃饭的网友，突然人间蒸发，目击者都称并无此人存在；七旬老汉为爱私奔，为何会牵扯出连环命案；案发现场被破坏的少女失踪案，尘封十年后牵扯出三条命案；神秘失踪的未婚夫，竟然同时还有五个女友,只有你一人能看到的幽灵邮件，是幻觉还是阴谋？不被重视的失踪案背后，总是精心计划的谋杀。如何在没有尸体的情况下推理？如何在死者不明的情况下找出凶手？五起单元案，一个反转。爱与谋杀，同样危险。</p>
                <ul>
                  <li>悬疑</li>
                  <li>18.9万字</li>
                  <li>生活悬疑</li>
                  <li>连载中</li>
                </ul>
              </div>
            </li>
            <li class="readListLl">
              <img src="https://img3.doubanio.com/view/ark_column_cover/retina/public/34778722.jpg?v=1598263500" alt="">
              <div class="detail">
                <span class="title">没有死者的谋杀</span>
                <span class="author">陆雾</span>
                <p>同桌吃饭的网友，突然人间蒸发，目击者都称并无此人存在；七旬老汉为爱私奔，为何会牵扯出连环命案；案发现场被破坏的少女失踪案，尘封十年后牵扯出三条命案；神秘失踪的未婚夫，竟然同时还有五个女友,只有你一人能看到的幽灵邮件，是幻觉还是阴谋？不被重视的失踪案背后，总是精心计划的谋杀。如何在没有尸体的情况下推理？如何在死者不明的情况下找出凶手？五起单元案，一个反转。爱与谋杀，同样危险。</p>
                <ul>
                  <li>悬疑</li>
                  <li>18.9万字</li>
                  <li>生活悬疑</li>
                  <li>连载中</li>
                </ul>
              </div>
            </li>
            <li class="readListLl">
              <img src="https://img3.doubanio.com/view/ark_column_cover/retina/public/34778722.jpg?v=1598263500" alt="">
              <div class="detail">
                <span class="title">没有死者的谋杀</span>
                <span class="author">陆雾</span>
                <p>同桌吃饭的网友，突然人间蒸发，目击者都称并无此人存在；七旬老汉为爱私奔，为何会牵扯出连环命案；案发现场被破坏的少女失踪案，尘封十年后牵扯出三条命案；神秘失踪的未婚夫，竟然同时还有五个女友,只有你一人能看到的幽灵邮件，是幻觉还是阴谋？不被重视的失踪案背后，总是精心计划的谋杀。如何在没有尸体的情况下推理？如何在死者不明的情况下找出凶手？五起单元案，一个反转。爱与谋杀，同样危险。</p>
                <ul>
                  <li>悬疑</li>
                  <li>18.9万字</li>
                  <li>生活悬疑</li>
                  <li>连载中</li>
                </ul>
              </div>
            </li>
            <li class="readListLl">
              <img src="https://img3.doubanio.com/view/ark_column_cover/retina/public/34778722.jpg?v=1598263500" alt="">
              <div class="detail">
                <span class="title">没有死者的谋杀</span>
                <span class="author">陆雾</span>
                <p>同桌吃饭的网友，突然人间蒸发，目击者都称并无此人存在；七旬老汉为爱私奔，为何会牵扯出连环命案；案发现场被破坏的少女失踪案，尘封十年后牵扯出三条命案；神秘失踪的未婚夫，竟然同时还有五个女友,只有你一人能看到的幽灵邮件，是幻觉还是阴谋？不被重视的失踪案背后，总是精心计划的谋杀。如何在没有尸体的情况下推理？如何在死者不明的情况下找出凶手？五起单元案，一个反转。爱与谋杀，同样危险。</p>
                <ul>
                  <li>悬疑</li>
                  <li>18.9万字</li>
                  <li>生活悬疑</li>
                  <li>连载中</li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 底部 -->
      <footer class="footer">
        <div class="leftFooter">
          <span>© 2014 - 2020 read.douban.com, all rights reserved.&nbsp&nbsp&nbsp北京方舟阅读科技有限公司</span>
          <span>京ICP备11027288号&nbsp&nbsp&nbsp网络视听许可证0110418号&nbsp&nbsp&nbsp文网文[2009]267号&nbsp&nbsp&nbsp(总)网出证(京)字129号</span>
        </div>
        <div class="rightFooter">
          <ul>
            <li>联系我们</li>
            <li>版权声明</li>
            <li>内容导则</li>
            <li>帮助中心</li>
            <li>来这里工作</li>
          </ul>
          <img src="./images/logoLeft.jpg" alt="">
        </div>
      </footer>
    </div>
  </body>
</html>